<template>
  <div class="app-container">
    <!-- 表单查询 -->
      <el-form :inline="true"   class="demo-form-inline"> <!-- inline="true"表示在一行 -->

        <el-form-item label="医院名称">
          <el-input v-model="searchObj.hosname" placeholder="医院名称"></el-input> <!--  v-model 双向绑定  就会向下面 searchObj传值-->
        </el-form-item>
        <el-form-item label="医院编号">
          <el-input v-model="searchObj.hoscode" placeholder="医院编号"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="getList()">查询</el-button>
        </el-form-item>
      </el-form>

    <!-- 批量删除按钮 -->
      <el-button type="danger" size="mini"  @click="removeRows() ">批量删除</el-button>

    <!-- 这是表格 -->
      <el-table :data="list" stripe style="width: 100%" @selection-change="handleSelectionChange"> <!--data="list" 这里的list就是下面写的那个 list:[] -->
        <el-table-column type="selection" width="55"/><!-- 复选框用来实现批量删除的 -->
        <el-table-column type="index" width="50" label="序号"/> <!-- index是记录行数，依次类推的 -->
        <el-table-column prop="hosname" label="医院名称"/> <!-- prop属性来对应对象中的键名即可填入数据 -->
        <el-table-column prop="hoscode" label="医院编号"/>
        <el-table-column prop="apiUrl" label="api基础路径" width="200"/>
        <el-table-column prop="contactsName" label="联系人姓名"/>
        <el-table-column prop="contactsPhone" label="联系人手机"/>
            <el-table-column prop="status" label="状态" width="80">
                <template slot-scope="scope"> <!-- 表示的整个表格 -->
                    <el-button disabled="" v-if="scope.row.status==1" type="primary" size="mini" 
                           @click="lockHostSet(scope.row.id,0)">可用
                    </el-button>
                    <el-button disabled="" v-if="scope.row.status==0" type="danger" size="mini" 
                           @click="lockHostSet(scope.row.id,1)">不可用
                    </el-button>
<!--                 {{ scope.row.status === 1 ? '可用' : '不可用' }}   scope.row表示每一行 -->
                </template>
            </el-table-column>
            <el-table-column label="操作" width="280" align="center">
                <template slot-scope="scope"> <!-- 表示的整个表格 -->
                <!-- 删除按钮 -->
                    <el-button type="danger" size="mini" 
                          icon="el-icon-delete" @click="removeById(scope.row.id)"> 删除<!-- 添加删除方法 -->
                    </el-button>
                <!-- 锁定与解锁 -->
                    <el-button v-if="scope.row.status==1" type="primary" size="mini" 
                          icon="el-icon-lock" @click="lockHostSet(scope.row.id,0)">锁定
                    </el-button>
                    <el-button v-if="scope.row.status==0" type="danger" size="mini" 
                          icon="el-icon-unlock" @click="lockHostSet(scope.row.id,1)">解锁
                    </el-button>

                <!-- 这是添加编辑按钮 添加隐藏域-->
                    <router-link :to="'/hospitalSet/edit/'+scope.row.id"><!-- 这是路由转发跳转的命令 -->
                       <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                    </router-link>
                </template>
            </el-table-column>
      </el-table>

      <br><br><br>

      <!-- 这是分页 -->
      <!-- 冒号:属性 ，表示单项绑定 @加属性为双向绑定，导致你点哪一页，然后实现getlist方法  然后page默认的由1变成我们点击的那个页数值
        当前页，每页记录数，总记录数，样式和布局  页面的转换，已经封装好的
       -->
      <el-pagination
      :current-page="page" 
      :page-size="limit"
      :total="total"
      style="padding: 30px 0; text-align: center;"
      layout="total, prev, pager, next, jumper"
      @current-change="getList">
    </el-pagination>
  </div>
</template>


<script>
import  hospitalSet  from '@/api/hospitalSet'

export default {
  data(){  //里面填写要的数据，作为变量使用
    return{
        page:1,//当前页
        limit:3,//每页显示几条数据
        searchObj:{},//搜索条件
        list:[],// 每一页数据的集合显示
        total:0 ,//所有记录总行数
        collection:[] //这是批量删除要选择的记录集合
    }
  },
  created(){ //页面渲染之前需要执行的，一般执行methods定义方法
    this.getList() //调用医院列表查询方法 
  },
  methods:{
      lockHostSet(id,status){
        hospitalSet.lockHospitalSet(id,status)
            .then(response=>{
                this.getList(this.page)
            })
      },
      getList(page=1){ //定义方法 医院列表查询
        this.page=page
        hospitalSet.getHospiatalPageList(this.page,this.limit,this.searchObj)//通过导入的类实现接口定义好的方法
            .then(response =>{ //response是接口返回数据
                this.list=response.data.records //这个从控制台可以看到，获取了查询的全部信息 返回到list集合当中
                this.total=response.data.total //这个也是控制台看到的，获取总记录数，为分页做准备

                console.log(response) //打印信息到控制台
            })//请求成功
            .catch(error =>{
                console.log(error)    
            })//请求失败    
      },
      removeById(id){
        this.$confirm(this.list[id-(this.page-1)*this.limit-1].hosname+'这条记录将被删除, 是否继续?', '提示', {//自己写的，好好思考
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          hospitalSet.removeById(id)
            .then(response =>{
              this.$message({ type: 'success',message: '删除成功!'});
              this.getList(this.page)//执行查询界面 返回的是当前页面
             }) //执行删除方法，弹出删除成功对话框，再执行查询界面
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      },
      //获取复选框数据
      handleSelectionChange(selection){ //selection 表示的就是复选框选择后的到的那些记录
          this.collection=selection},
      //批量删除方法
      removeRows() {
        this.$confirm('确认要将这些记删除, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        })
        .then(() => {
          var idlist=[];
          for (var  i = 0; i < this.collection.length; i++) {
            var id = this.collection[i].id;//复选的得到的是整条记录，取得整条记录当中的id值
            idlist.push(id);//将id值传入一个数组当中
          }
          hospitalSet.batchRemoveHospitalSet(idlist)
            .then(response =>{
              this.$message({ type: 'success',message: '删除成功!'});
              this.getList(this.page)//执行查询界面 返回的是当前页面
             }) //执行删除方法，弹出删除成功对话框，再执行查询界面
        })
      }
  }

}
</script>